import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from './Component'
import { connect } from 'react-redux'
import { Select, Spin, Empty, message } from 'antd'
import PropTypes from 'prop-types'
import _ from 'loadsh'
import style from './ArbitratorSelect.module.less'
import { decomporessListLicenseAndMobileAndBank } from '@src/assets/js/tool'
const { Option } = Select
class ArbitratorSelect extends Component {
  state = {
    options: [],
    loading: false
  }

  // 获取名称选项
  getOptions (s) {
    this.setState({ loading: true })
    this.$get('/api/xapc/arbitrator', {
      condition: JSON.stringify([{ k: 'name', o: 'like', v: `%${s}%` }]),
      page_size: 10,
      current: 1
    })
      .then(res => {
        this.setState({ loading: false })
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        decomporessListLicenseAndMobileAndBank(res.data.list)
        this.setState({
          options: res.data.list
        })
      })
      .catch(() => this.setState({ loading: false }))
  }

  // 获取id选项
  getOptionsById (id) {
    this.setState({ loading: true })
    this.$get('/api/xapc/arbitrator', {
      condition: JSON.stringify([{ k: 'id', o: '=', v: id }]),
      page_size: 10,
      current: 1
    })
      .then(res => {
        this.setState({ loading: false })
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        decomporessListLicenseAndMobileAndBank(res.data.list)
        this.setState({
          options: res.data.list
        })
      })
      .catch(() => this.setState({ loading: false }))
  }

  // 渲染选项
  renderOptions () {
    return this.state.options.map((li, i) => {
      return <Option key={`${li.id}_${i}`} value={li.id}>{li.name}</Option>
    })
  }

  // 渲染空的情况
  renderEmpty () {
    if (this.state.loading) {
      return (
        <div className={style.empty}><Spin /></div>
      )
    }
    return <div className={style.empty}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
  }

  componentDidUpdate (prev) {
    const { value } = this.props
    if (value && value !== prev.value && this.state.options.length === 0) {
      this.getOptionsById(value)
    }
  }

  componentDidMount () {
    this.timer = setTimeout(() => {
      if (this.props.value) {
        this.getOptionsById(this.props.value)
      }
    }, 200)
  }

  componentWillUnmount () {
    this.timer && clearTimeout(this.timer)
  }

  render () {
    return (
      <div className={style.container}>
        <Select defaultActiveFirstOption={false} filterOption={false} value={this.props.value} onChange={(...arg) => this.props.onChange(...arg)} placeholder='请选择仲裁员' showSearch allowClear onSearch={_.debounce(this.getOptions.bind(this), 500, { leading: false })} notFoundContent={this.renderEmpty()}>
          {this.renderOptions()}
        </Select>
      </div>
    )
  }
}

ArbitratorSelect.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func
}

ArbitratorSelect.defaultProps = {
  value: undefined,
  onChange: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(ArbitratorSelect)
